<template>
    <div style="width: 95%; padding: 0 2.5%">
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="默认" name="first">
                <view style="display: flex; justify-content: center; width: 100%">
                    <draggable :list="layout" :options="{ sort: false }" :group="{ name: 'layouts', pull: 'clone', put: false }" :clone="clone" @choose="choose" style="position: relative; width: 70%">
                        <ComponentContainer v-for="item in layout" :key="item.id" :name="item.name" :num="item.num" type="layout" :componentName="item.componentName"> </ComponentContainer>
                    </draggable>
                </view>
                <!--<el-divider><span style="color: #DCDFE6">拖动布局</span></el-divider>-->
            </el-tab-pane>
            <el-tab-pane label="自定义" name="tow">
                <view>
                    <el-form :inline="true" :model="form" :rules="formRule" ref="ruleForm" class="demo-form-inline">
                        <el-form-item label="布局比例" prop="layoutRatio">
                            <el-input v-model="form.layoutRatio" placeholder="如1-1-1" size="mini"></el-input>
                        </el-form-item>
                        <el-tooltip class="item" effect="dark" :content="'以 - 作为分割符，比例最大为' + maxLayoutRote" placement="top-start">
                            <div style="display: inline-block; vertical-align: top; margin-right: 10px">
                                <i class="el-icon-question" style="font-size: 16px"></i>
                            </div>
                        </el-tooltip>
                        <el-form-item>
                            <el-button type="primary" @click="yes" size="mini">确认</el-button>
                        </el-form-item>
                    </el-form>
                </view>
                <view style="display: flex; justify-content: center">
                    <draggable :list="layoutCustom" :options="{ sort: false }" :group="{ name: 'layouts', pull: 'clone', put: false }" :clone="clone" @choose="choose" style="position: relative; width: 70%">
                        <view class="flex" style="height: 35px; margin-bottom: 4px" v-for="layoutCustomItem in layoutCustom">
                            <view class="content-layout-item" :class="item.layoutClass" v-for="(item, index) in layoutCustomItem.num" :key="index">{{ flexHash[item.layoutClass] }}</view>
                        </view>
                    </draggable>
                </view>
                <el-divider>
                    <span style="color: #aeb1b7; cursor: pointer" @click="clearLayoutCustom"> 清空 </span>
                </el-divider>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import ComponentContainer from "@/components/LeftComponents/ComponentContainer/ComponentContainer"
import draggable from "@/common/js/vuedraggable"

let flexMap = ["flex-sub", "flex-twice", "flex-treble", "flex-four", "flex-five"]
let flexHash = {
    "flex-sub": 1,
    "flex-twice": 2,
    "flex-treble": 3,
    "flex-four": 4,
    "flex-five": 5,
}
let layoutGlobalId = 1000

let maxLayoutRote = 5

export default {
    name: "LeftCompoentsByLayouts",
    props: {
        clone: {
            type: Function,
            default: null,
        },
        layout: {
            type: Array,
            default: () => [],
        },
        choose: {
            type: Function,
            default: null,
        },
    },
    data() {
        return {
            maxLayoutRote: maxLayoutRote,
            flexHash: flexHash,
            activeName: "first",
            form: {
                layoutRatio: "",
            },
            layoutCustom: [],
            formRule: {
                layoutRatio: [
                    {
                        validator: this.validateCustomValue,
                        trigger: "blur",
                    },
                ],
            },
        }
    },
    methods: {
        validateCustomValue(rule, value, callback) {
            if (value === "") {
                callback(new Error("请填写布局比例"))
                return
            }
            let arrValue = value.split("-")
            for (let i = 0; i < arrValue.length; i++) {
                let item = arrValue[i]
                let itemRex = /^[1-5]$/
                if (!itemRex.test(item)) {
                    callback(new Error(`布局比例在1-${maxLayoutRote}之间,并以 - 分割。`))
                    return
                }
            }
            callback()
        },
        clearLayoutCustom() {
            this.layoutCustom = []
        },
        yes() {
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                    let value = this.form.layoutRatio
                    let arrValue = value.split("-")
                    let num = []
                    for (let i = 0; i < arrValue.length; i++) {
                        let index = parseInt(arrValue[i]) - 1
                        num.push({
                            layoutClass: flexMap[index],
                            itemList: [],
                            iStyle: {},
                            iClass: [],
                        })
                    }
                    let name = arrValue.join(":")
                    this.layoutCustom.push({ name: `布局 ${name}`, id: layoutGlobalId++, componentName: "Iflex", iStyle: {}, num })
                } else {
                    return false
                }
            })
        },
    },
    components: {
        ComponentContainer,
        draggable,
    },
}
</script>

<style scoped>
.content-layout-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 2px;
    background-color: #675e6f;
    color: white;
}
</style>
